<template>
  <div class="container">
    <div class="table-wrap">
      <div class="search-wrap">
        <van-search
          v-model="value"
          background="#103B97"
          show-action
          shape="round"
          placeholder="输入小票号码查询溯源信息"
        >
          <template #action>
            <div class="search-btn" @click="onClickButton">搜索</div>
          </template>
        </van-search>
      </div>
      <div v-if="tabList">
        <el-scrollbar height="390">
          <div class="header">
            <div class="cover">
              <img src="@img/sycx/sycx_18.png" alt />
            </div>
            <div class="right">
              <div class="head">
                <div class="scmc">市场名称：{{ tabList.marketnm }}</div>
                <div class="dizhi">地址：{{ tabList.address }}</div>
              </div>
              <div class="bottom">
                <div class="left">
                  <div class="touxiang">
                    <img src="@img/sycx/sycx_11.png" alt />
                  </div>
                  <div class="piao">
                    <img src="@img/sycx/sycx_24.png" alt />
                  </div>
                </div>
                <div class="middle">
                  <div class="up">
                    <div class="left">
                      <span>
                        <span class="name">姓 名：</span>
                        <span class="word">{{ tabList.peoplenm }}</span>
                      </span>
                      <span class="ml">
                        <span class="name">摊位号：</span>
                        <span class="word">{{ tabList.twhnm }}</span>
                      </span>
                      <span>
                        <span class="name">经营类别：</span>
                        <span class="word">{{ tabList.jylb }}</span>
                      </span>
                    </div>
                    <div class="right">
                      <span class="xyxj">
                        <span class="name xyxj1">信用星级：</span>
                        <span v-if="tabList.xydj" class="word xyxj2">
                          <img
                            v-for="i in tabList.xydj * 1"
                            :key="i"
                            src="@img/cxgs/cxgs_13.png"
                            alt
                          />
                          <img
                            v-for="i in 5 - tabList.xydj"
                            :key="i"
                            src="@img/cxgs/cxgs_10.png"
                            alt
                          />
                        </span>
                      </span>
                      <span class="ml">
                        <span class="name">点 赞：</span>
                        <span class="word">{{ tabList.dianzan }}</span>
                      </span>
                      <span>
                        <span class="name">投 诉：</span>
                        <span class="word">{{ tabList.tousu }}</span>
                      </span>
                    </div>
                  </div>
                  <div class="down">
                    <span class="ml">
                      <span class="name">出货批号：</span>
                      <span class="word">{{ tabList.lurupihao }}</span>
                    </span>
                    <span>
                      <span class="name">销售时间：</span>
                      <span class="word">{{ tabList.createTime }}</span>
                    </span>
                  </div>
                </div>
                <div class="right1">
                  <span>市场评价玛</span>
                  <qrcode-vue
                    style="margin-top: 5px"
                    :value="tabList.erweima"
                    :size="60"
                    level="H"
                  />
                </div>
              </div>
            </div>
          </div>
          <div v-if="userinfo" class="content">
            <div class="item-wrap">
              <div v-for="(item, index) in tabList.jyXXDtos" :key="index" class="item">
                <div class="m_left">
                  <img :src="item.pic" alt />
                </div>
                <div class="m_right">
                  <div class="m_head">商品名称：{{ item.spname }}</div>
                  <div class="m_bottom">
                    <div class="b_left">
                      <span>
                        <span class="name">重 量(KG)：</span>
                        <span class="word">{{ item.jhsum }}</span>
                      </span>
                      <span class="ml">
                        <span class="name">单 价(元)：</span>
                        <span class="word">{{ item.danjia }}</span>
                      </span>
                      <span>
                        <span class="name">总 价(元)：</span>
                        <span class="word">{{ item.allhj }}</span>
                      </span>
                      <span class="ml mll">
                        <span class="name name1">来源信息：</span>
                        <span class="word word1">
                          {{
                          item.comeaddress
                          }}
                        </span>
                      </span>
                    </div>
                    <div class="b_right">
                      <span>
                        <span class="name">检测日期：</span>
                        <span class="word">{{ item.jcsj }}</span>
                      </span>
                      <span class="ml">
                        <span class="name">溯源码：</span>
                        <span class="word">{{ item.suyuanma }}</span>
                      </span>
                      <span>
                        <span class="name">检测项目：</span>
                        <span class="word">{{ item.jcxm }}</span>
                      </span>
                      <span class="ml">
                        <span class="name">检测结果：</span>
                        <span class="word">{{ item.jcjg }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom1">
            <div class="left">
              <div>投诉电话</div>
              <div class="jiandu">监督电话</div>
              <div>检测公司</div>
            </div>
            <div class="right">
              <div>{{ tabList.tsphone }}</div>
              <div class="jiandu">{{ tabList.jdphone }}</div>
              <div>{{ tabList.jcgs }}</div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <van-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
import QrcodeVue from "qrcode.vue";
import { ref } from "vue";
import { getCXGSByMarket, getJYCX, getSUYUAN } from "@/apis/subjectInfo";
import { useRouter } from "vue-router";
const boyUrl = ref("src/assets/images/ztxx/boy.png");
const girlUrl = ref("src/assets/images/ztxx/girl.png");
// const value = ref(1716782419094);
const value = ref();
let loading = ref(false);
const router = useRouter();
const tabList = ref();
const userinfo = ref();
const getInfo = value => {
  loading.value = true;
  getSUYUAN(value).then(res => {
    if (res.data.marketnm) {
      tabList.value = res.data;
      userinfo.value = res.data.jyXXDtos;
      console.log(userinfo.value[0]);
      loading.value = false;
    } else {
      showDialog({
        title: "提示",
        message: "未找到您的相关信息"
      }).then(() => {
        // on close
        tabList.value = null;
        loading.value = false;
      });
    }
  });
};
const onClickButton = () => {
  if (value.value) {
    getInfo(value.value);
  } else {
    showDialog({
      title: "提示",
      message: "请输入您的小票号码"
    }).then(() => {
      tabList.value = null;
    });
  }
};
</script>
<style lang="scss" scoped>
.container {
  height: 460px;
  ::v-deep .table-wrap {
    height: 450px;
    .search-wrap {
      display: flex;
      justify-content: center;
      .van-search {
        width: 90%;
        margin-top: 20px;
        height: 45px;
        .van-search__content {
          height: 45px;
          line-height: 45px;
          border: 2px solid #457bf0;
          .van-search__label {
            line-height: 45px;
            height: 45px;
          }
          .van-cell {
            font-size: 17px;
            height: 45px;
            color: #868686;
          }
          .van-field__body {
            padding-right: 30px;
          }
        }
      }
      .search-btn {
        margin-left: -50px;
        color: #fff;
        font-size: 20px;
        padding: 8px 30px;
        border-radius: 50px;
        background: #457bf0;
      }
    }
    .header {
      margin-top: 10px;
      display: flex;
      .cover {
        height: 119px;
        width: 80px;
        display: flex;
        align-items: center;
        background: #fff;
        border: #457bf0 1px solid;
        img {
          width: 100%;
        }
      }
      .right {
        margin-left: 10px;
        flex: 1;
        // border: 1px solid #fff;
        .head {
          display: flex;
          justify-content: space-between;
          div {
            padding: 0 10px;
            font-size: 9px;
            color: #fff;
            height: 20px;
            width: 44%;
            line-height: 20px;
            background: #457bf0;
          }
        }
        .bottom {
          margin-top: 5px;
          height: 90px;
          display: flex;
          .left {
            .touxiang,
            .piao {
              display: flex;
              justify-content: center;
              img {
                height: 100%;
              }
            }
            div {
              width: 70px;
              height: 45px;
              background: #fff;
            }
            .piao {
              margin-top: 5px;
            }
          }
          .middle {
            margin-left: 5px;
            .up {
              display: flex;
              div {
                width: 117px;
                height: 45px;
                background: #fff;
                display: flex;
                flex-direction: column;
                span {
                  padding: 0 4px;
                  font-size: 10px;
                  height: 33%;
                  display: inline-block;
                  background: #d3dffb;
                }
                .name {
                  width: 50px;
                  text-align: right;
                }
                .ml {
                  background: #fff;
                  span {
                    background: #fff;
                  }
                }
              }
              .right {
                margin-left: 8px;
              }
            }
            .down {
              margin-top: 4px;
              width: 242px;
              height: 45px;
              background: #fff;
              display: flex;
              flex-direction: column;
              span {
                padding: 0 4px;
                font-size: 10px;
                height: 50%;
                display: inline-block;
                background: #d3dffb;
                line-height: 22.5px;
              }
              .name {
                width: 50px;
                text-align: right;
              }
              .ml {
                background: #fff;
                span {
                  background: #fff;
                }
              }
            }
          }
          .right1 {
            margin-left: 5px;
            flex: 1;
            height: 94px;
            background: #fff;
            text-align: center;
            span {
              width: 100%;
              display: inline-block;
              text-align: center;
              font-size: 10px;
            }
            img {
              width: 50%;
            }
          }
        }
      }
    }
    .content {
      margin-top: 10px;
      .item-wrap {
          height: 100%;
          .item {
            display: flex;
            .m_left {
              height: 100px;
              width: 78px;
              display: flex;
              align-items: center;
              background: #fff;
              img {
                width: 100%;
              }
            }
            .m_right {
              height: 100px;
              margin-left: 10px;
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .m_head {
                padding: 0 10px;
                font-size: 12px;
                color: #fff;
                height: 20px;
                line-height: 20px;
                background: #457bf0;
              }
              .m_bottom {
                height: 75px;
                display: flex;
                justify-content: space-between;
                div {
                  width: 49%;
                  background: #fff;
                  background: #fff;
                  display: flex;
                  flex-direction: column;
                  span {
                    padding: 0 4px;
                    font-size: 10px;
                    height: 20%;
                    display: inline-block;
                    background: #d3dffb;
                    &:nth-child(4) {
                      height: 40%;
                    }
                  }
                  .name {
                    height: 100%;
                    width: 60px;
                    text-align: right;
                  }
                  .ml {
                    background: #fff;
                    span {
                      background: #fff;
                    }
                    .name1 {
                      height: 100%;
                      display: flex;
                      justify-content: flex-end;
                    }
                    .word1 {
                      font-size: 9px;
                      display: flex;
                      height: 100%;
                      width: 100px;
                    }
                  }
                  .mll {
                    display: flex;
                  }
                }
                .b_left {
                }
                .b_right {
                }
              }
            }
          }
      }
    }
    .bottom1 {
      margin-top: 10px;
      height: 60px;
      display: flex;
      .left {
        width: 78px;
        font-size: 12px;
        div {
          text-align: center;
          height: 33%;
          background: #d3dffb;
        }
        .jiandu {
          background: #fff;
        }
      }
      .right {
        flex: 1;
        margin-left: 10px;
        font-size: 12px;
        div {
          height: 33%;
          background: #d3dffb;
          padding-left: 10px;
        }
        .jiandu {
          background: #fff;
        }
      }
    }
  }
}
.xyxj {
  height: 100%;
  display: flex;
  .xyxj1 {
    height: 100%;
  }
  .xyxj2 {
    height: 100%;
    img {
      width: 8px;
    }
  }
}
</style>
